/*
 * @Author: xiaosihan 
 * @Date: 2022-06-23 21:15:04 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-05 10:05:08
 */


import SpriteText from "../SpriteText";
import icon2PNG from "./icon2.png";
import iconRedPNG from "./iconRed.png";
import iconOrangePNG from "./iconOrange.png";
import iconBluePNG from "./iconBlue.png";

/**
 * 文本弹窗
 * @export
 * @class SpriteText
 * @extends {SpriteText}
 */
export default class AreaName3 extends SpriteText {

    constructor(text = "SpriteText", textHeight?: number, color?: `#${string}` | `rgba(${string})`, iconColor: "red" | "orange" | "blue" = "red") {
        super(text, textHeight, color);

        this.iconColor = iconColor;
        this.text = `${text}\n\n\n\n`;
        this.renderOrder = 100;
        // this.backgroundColor = "#ffffffaa";
        this.padding = 10;
        this.borderRadius = 4;
        this.borderWidth = 0;
        this.textHeight = 16;
        this.color = "#ffffff";

        // this.borderColor = "#fff";
        // this.color = "#000";

        if (this.material.map) {
            this.material.map.anisotropy = 16;
            this.material.transparent = true;
            // this.material.alphaTest = 0.3;
            this.material.sizeAttenuation = false;
            this.material.depthTest = false;
        }
    }

    renderOrder = 10;

    iconColor: "red" | "orange" | "blue" = "red";

    static iconRedPNG = (() => {
        const img = new Image();
        img.src = iconRedPNG;
        return img;
    })();

    static iconOrangePNG = (() => {
        const img = new Image();
        img.src = iconOrangePNG;
        return img;
    })();

    static iconBluePNG = (() => {
        const img = new Image();
        img.src = iconBluePNG;
        return img;
    })();

    _genCanvas() {
        //@ts-ignore
        super._genCanvas();
        this.scale.multiplyScalar(0.0015);
        if (this.parent) {
            this.scale.divide(this.parent.scale);
        }

        (async () => {

            while (this.iconColor === "red" && !AreaName3.iconRedPNG.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            while (this.iconColor === "orange" && !AreaName3.iconOrangePNG.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            while (this.iconColor === "blue" && !AreaName3.iconBluePNG.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            //@ts-ignore
            super._genCanvas();
            this.scale.multiplyScalar(0.0015);
            if (this.parent) {
                this.scale.divide(this.parent.scale);
            }

            //@ts-ignore
            const canvas = this._canvas as HTMLCanvasElement;
            const { width, height } = canvas;

            const ctx = canvas.getContext("2d")!;
            ctx.globalCompositeOperation = "destination-over";
            ctx.setTransform(1, 0, 0, 1, 0, 0);

            if (this.iconColor === "red") {
                const { width: iconWidth, height: iconHeight } = AreaName3.iconRedPNG;
                ctx.drawImage(AreaName3.iconRedPNG, 0, 0, iconWidth, iconHeight, (width - iconWidth * 6) * 0.5 - 10, (height - (iconHeight * 6)) * 0.5 + 65, iconWidth * 6, iconHeight * 6);
            } else if (this.iconColor === "orange") {
                const { width: iconWidth, height: iconHeight } = AreaName3.iconOrangePNG;
                ctx.drawImage(AreaName3.iconOrangePNG, 0, 0, iconWidth, iconHeight, (width - iconWidth * 6) * 0.5 - 10, (height - (iconHeight * 6)) * 0.5 + 65, iconWidth * 6, iconHeight * 6);
            } else if (this.iconColor === "blue") {
                const { width: iconWidth, height: iconHeight } = AreaName3.iconBluePNG;
                ctx.drawImage(AreaName3.iconBluePNG, 0, 0, iconWidth, iconHeight, (width - iconWidth * 6) * 0.5 - 10, (height - (iconHeight * 6)) * 0.5 + 65, iconWidth * 6, iconHeight * 6);
            }

            this.material.map!.needsUpdate = true;

        })();

    }

}
